<template>
  <div>
    <Modal 
      v-model:visible="visible"
      v-bind="$attrs"
      :mask-closable="false"
      @ok="confirm"
      @cancel="cancel"
      :destroy-on-close="true"
    >
      <div class="message-content">
        <img :src="getIcon()" />
        <div class="message">{{ props.content }}</div>
      </div>
    </Modal>
  </div>
</template>

<script lang='ts' setup>
  import { ref, Ref } from 'vue';
  import { Modal } from 'ant-design-vue';
  import { getAssetsFile } from '/@/utils/common';

  const props = defineProps<{
    visible: Ref<boolean>;
    content: string;
    type: 'success' | 'error' | 'warning';
    confirm?: () => void;
    cancel?: () => void;
    vanish?: () => void;
  }>()

  const getIcon = () => {
    return getAssetsFile(`images/messageIcon/${props.type}.png`)
  }

  const visible = ref<boolean>(props.visible.value)
  const confirm = async () => {
    await props.confirm?.()
    props.vanish?.()
    visible.value = false
  }
  
  const cancel = async () => {
    await props.cancel?.()
    props.vanish?.()
    visible.value = false
  }
  
</script>

<style lang='less' scoped>
  .message-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 46px;
      height: 46px;
    }
    .message {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
  }
</style>